<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="//cdn.bootcss.com/jquery/2.2.1/jquery.min.js"></script>
</head>
<body>
<div id="img"></div>
<div id="other"></div>

<style>
    #img > div {
        display: inline-block;
        margin: 10px;
        box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.3);
        padding: 5px;
        text-align: center;
        vertical-align: top;
    }

    #img h2 {
        font-weight: lighter;
        font-size: 12px;
    }

    #img img {
        max-width: 200px;
        max-height: 200px;
    }
</style>

<template id="imgT">
    <div>
        <h2>{{title}}</h2>
        <h4>{{name}}</h4>
        <h6>{{use}}|{{time}}</h6>
        <img src="/file/view/{{path}}">
    </div>
</template>

<script>
    var T_img = function (obj) {
        var str = $('template#imgT').html();
        return str.replace(/\{\{(.+?)}}/g, function (a, key, c, d) {
            return obj[key];
        })
    };

    $.ajax({
        url: '/file/list',
        success: function (obj) {
            console.dir(obj);
            obj.files.map(function (file) {
                if (file.type.match(/image/)) {
                    $('#img').append(T_img({
                        path: file.path,
                        title: file.path,
                        use: file.use,
                        time: file.time - new Date().getTime(),
                        name: file.name
                    }));
                }
            })
        }
    })
</script>
</body>
</html>